<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        input{
            vertical-align: middle;
            height: 30px;
            padding: 0;
        }
        span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 1px dashed yellowgreen;
            vertical-align: middle;
            font: 20px/30px "";
            text-align: center;
        }
        p{
            width: 200px;
            height: 30px;
            border: 2px solid orange;
            vertical-align: middle;
            display: inline-block;
            background: #8df;
        }
        div{
            display: inline-block;
            width: 30px;
            height: 30px;
            font: 20px/30px "";
            text-align: center;
            border: 1px solid #000;
            background: #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="输入数字">
    <span></span>
    <input type="text" placeholder="输入数字">
    <span style="cursor: pointer;">=</span>
    <p></p>
    <br>
    <div>+</div>
    <div>-</div>
    <div>*</div>
    <div>/</div>
    <div>%</div>

    <script>
        // 获取元素
        var adiv = document.querySelectorAll("div");
        var ainput = document.querySelectorAll("input")
        var aspan = document.querySelectorAll("span")
        var opbox = document.querySelector("p")
        console.log(adiv);
        console.log(ainput);
        console.log(aspan);
        console.log(opbox);

        // 确定 运算符号 给 每一个div 添加点击事件
        for(var i=0;i<adiv.length;i++){
            adiv[i].onclick = function(){
                aspan[0].innerHTML = this.innerHTML;
            }
        }

        // 给等号添加事件
        aspan[1].onclick = function(){
            // 获取 输入框的值
            var num1 = +ainput[0].value;
            var num2 = +ainput[1].value;
            console.log(num1,num2);
            // 获取 到 运算符号
            var sym =  aspan[0].innerHTML;
            console.log(sym);

            if(sym == "+"){
                opbox.innerHTML = num1 + num2;
            }else if(sym == "-"){
                opbox.innerHTML = num1 - num2;
            }else if(sym == "*"){
                opbox.innerHTML = num1 * num2;
            }else if(sym == "/"){
                opbox.innerHTML = num1 / num2;
            }else if(sym == "%"){
                opbox.innerHTML = num1 % num2;
            }
        }
    </script>
</body>
</html>